<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gene Terrain</title>
<!-- Le styles -->
<link rel="stylesheet" href="css/bootstrap/bootstrap.css">
<style>
body {
	/* padding-top: 60px;
	/* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="css/bootstrap/bootstrap-responsive.css" rel="stylesheet">

<style type="text/css">
body,html {
	height: 100%;
}

#home{ 
	height: 100%; position: relative; overflow: hidden;
}
#home[id] {display: table; position: static;}
#middle {position: absolute; top: 50%; width: 100%} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static; width: 100%}
#inner {position: relative; top: -50%; width: 100%}/*for explorer only */

#about,#contact { 
	padding-top: 80px;
}

.placeholder {
	color: #aaa;
}

input[type=text],input[type=password] {
	outline-style: none;
}
</style>

<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

</head>

<body>

	<div class="navbar navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container-fluid">
				<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
				<span class="icon-bar"></span>
				</a> 
				<font class="brand" style="color: #08C">MedeoLinx</font>
				<div class="nav-collapse">
					<ul class="nav">
						<li id="homeLink" class="active"><a href="action/home"> Gene Terrain</a></li>
						<li id="aboutLink"><a href="javascript: activeAbout()">About</a></li>
						<li id="contactLink"><a href="javascript: activeContact()">Contact</a></li>
					</ul>
				</div>
				<!--/.nav-collapse -->
			</div>
		</div>
	</div>

	<div id="home" class="container" >
	<div id="middle"><div id="inner">
		<div class="span4 offset4">
			<form class="well form-horizontal" action="action/login" method="post">
				<div class="span4"><input name="name" type="text" class="span3" placeholder="email or username"> </div>
				<br><br>
				<div class="span2"><input name="password" type="password" class="span2" placeholder="passoword"></div>
				<div class="span1"><button type="submit" class="btn btn-info">Sign in</button></div>
				<br><br>
				<div class="span2"><label class="checkbox" style="color: #999"> <input type="checkbox"> Remember me </label></div>
				<div><a href="#">forget password</a></div>
			</form>
		</div>
	
		<div class="span4 offset4">
			<form class="well form-horizontal" action="action/signUp" method="post">
				<fieldset>
					<legend>New to MedeoLinx?</legend>
					<div class="span4">
						<input name="name" type="text" class="span3" placeholder="username">
					</div>
					<br><br>
					<div class="span4">
						<input name="email" type="text" class="span3" placeholder="e-mail">
					</div>
					<br><br>
					<div class="span4">
						<input name="password" type="password" class="span3" placeholder="passoword">
					</div>
					<br><br>
					<div class="span3">
						<button type="submit" class="btn btn-warning  pull-right">Sign up for MedeoLinx</button>
					</div>
					<br><br>
				</fieldset>
			</form>
		</div>
		</div></div>
	</div>

	<div id="about" class="container span8 offset3">
		<div class="well">
			<p>MyMedex is a web portal in a secure cloud computing environment. It has been specially designed with you, a
				scientific user, in mind. This (beta) site is freely available to you and your colleagues as a benefit for your
				being a MedeoLinx customer.</p>
			<p>MyMedex (beta) offers you a preview into these features:</p>
			<ol>
				<li>Upload public or proprietary data sets as large as 5GB each.</li>
				<li>Automatically recognize the structure of several types of scientific data sets.</li>
				<li>Access scientific data from any browser.</li>
				<li>View project details in multiple formats, including .doc, .xls, and .pdf. Easily share results with your
					colleagues.</li>
			</ol>
		</div>
		Copyright © MedeoLinx LLC 2009-2012. All Rights Reserved.
	</div>

	<div id="contact" class="container span8 offset3">
		<div  class="well">
		<p>MedeoLinx is based at the Indiana University Emerging Technologies Center, a renowned incubator for innovators
			in fields such as the life sciences and information technology, and for angel investors and intellectual property
			licensing experts.</p>
		<p>Contact us at (317) 721-8887 or contact@medeolinx.com to arrange a visit to our office at 351 West 10th Street
			in Indianapolis, Indiana, USA 46202. To reach us via a voice over Internet connection, contact our “MedeoLinx” Skype
			account.</p>
			<p align="center"><br> <img alt="" src="img/map.png"> </p>
		</div>
	</div>

	<!-- /container -->

	<!-- Le javascript
    ================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
	<script type="text/javascript" src="js/bootstrap/bootstrap-dropdown.js"></script>
	<script type="text/javascript" src="js/bootstrap/bootstrap-carousel.js"></script>
	<script type="text/javascript" src="js/jquery-plugin/jquery.placeholder.js"></script>
	<script type="text/javascript" src="js/index.js"></script>
	<script>
		$('input[placeholder]').placeholder();
	</script>
	<!-- google map -->
</body>
</html>